import { RouteRecordRaw, createWebHistory, createRouter } from "vue-router";

// 定义路由元信息类型
declare module 'vue-router' {
	interface RouteMeta {
		requiresAuth : boolean;    // 是否需要认证
		title : string;            // 菜单标题
		icon ?: string;            // 菜单图标
		roles ?: number[];         // 允许访问的角色
		hidden ?: boolean;         // 是否在菜单中隐藏
		keepAlive?: boolean;       // 是否需要缓存组件
	}
}

const routes : Array<RouteRecordRaw> = [
	{
		path: '/',
		name: 'Login',
		component: () => import('../views/login/login.vue'),
		meta: {
			requiresAuth: false,
			title: '登录',
			hidden: true  // 不在菜单显示
		},
		beforeEnter: (to, from, next) => {
			if (localStorage.getItem('token')) {
				return next('/index');
			}
			window.document.body.style.backgroundColor = "#fff";
			next();
		}
	},
	{
		path: '/index',
		name: 'Index',
		component: () => import('../views/index/index.vue'),
		meta: {
			keepAlive: true, // 需要缓存
			requiresAuth: true,
			title: '实时磅房',
			icon: 'House',
			roles: [1, 3]  // 用户和管理员都可访问
		}
	},
	{
		path: '/hisList',
		name: 'hisList',
		component: () => import('../views/hisList/hisList.vue'),
		meta: {
			keepAlive: false,
			requiresAuth: true,
			title: '过磅历史',
			icon: 'Document',
			roles: [1, 3]
		}
	},
	{
		path: '/weighingPlan',
		name: 'weighingPlan',
		component: () => import('../views/weighingPlan/weighingPlan.vue'),
		meta: {
			keepAlive: false,
			requiresAuth: true,
			title: '过磅计划',
			icon: 'Calendar',
			roles: [1, 3]
		}
	},
	{
		path: '/configuration',
		name: 'configuration',
		component: () => import('../views/configuration/configuration.vue'),
		meta: {
			keepAlive: false,
			requiresAuth: true,
			title: '货物列表',
			icon: 'List',
			roles: [3] // 仅管理员可见
		}
	},
	{
		path: '/companyManagement',
		name: 'companyManagement',
		component: () => import('../views/companyManagement/companyManagement.vue'),
		meta: {
			keepAlive: false,
			requiresAuth: true,
			title: '公司列表',
			icon: 'Location',
			roles: [3] // 仅管理员可见
		}
	},
	{
		path: '/supplement',
		name: 'supplement',
		component: () => import('../views/supplementList/supplementList.vue'),
		meta: {
			keepAlive: false,
			requiresAuth: true,
			title: '补录列表',
			icon: 'Document',
			roles: [1,3] 
		}
	},
	{
		path: '/review',
		name: 'review',
		component: () => import('../views/review/review.vue'),
		meta: {
			keepAlive: false,
			requiresAuth: true,
			title: '待审核列表',
			icon: 'Edit',
			roles: [3] // 仅管理员可见
		}
	},
	// {
	// 	path: '/dataStatistics',
	// 	name: 'dataStatistics',
	// 	component: () => import('../views/dataStatistics/dataStatistics.vue'),
	// 	meta: {
	// 		keepAlive: false,
	// 		requiresAuth: true,
	// 		title: '数据统计',
	// 		icon: 'TrendCharts',
	// 		roles: [1,3] // 仅管理员可见
	// 	}
	// }
];

const router = createRouter({
	history: createWebHistory(),
	routes
});

// 全局路由守卫
router.beforeEach((to, from, next) => {
	const isAuthenticated = !!localStorage.getItem('token');
	const userRole = Number(localStorage.getItem('role') || 0);

	// 需要认证但未登录
	if (to.meta.requiresAuth && !isAuthenticated) {
		return next('/');
	}

	// 检查角色权限
	if (to.meta.roles && !to.meta.roles.includes(userRole)) {
		// 无权限访问，清除token并跳转到登录页
		localStorage.removeItem('token');
		next('/');
	}

	// 设置页面背景色
	window.document.body.style.backgroundColor = "#fff";
	next();
});

export default router;
